<template>
  <div>

    <div class="sfz">
      <div style="font-size:6px; color:black;">完成认证需要核实您的身份信息,请拍摄您本人的身份证</div>


      <div class=" right-side">

        <el-upload class="avatar-uploader" action="#" :show-file-list="false" :http-request="uploadImgFront"
          :on-change="handleChangeFront" :before-upload="beforeAvatarUpload" :auto-upload="true" :accept="'image/*'">
          <img v-if="imageUrlFront" :src="imageUrlFront" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>

          <div slot="tip" class="el-upload__tip" style="font-size:10px">只能上传jpg/png文件，且不超过10MB</div>

        </el-upload>

        <div class="el-upload__tip" style="font-size:15px">身份证正面</div>

      </div>

      <div class=" wrong-side">

        <el-upload class="avatar-uploader" action="#" :show-file-list="false" :http-request="uploadImgContrary"
          :on-change="handleChangeContray" :before-upload="beforeAvatarUpload" :auto-upload="true">
          <img v-if="imageUrlContrary" :src="imageUrlContrary" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>

          <div slot="tip" class="el-upload__tip" style="font-size:10px">只能上传jpg/png文件，且不超过10MB</div>

        </el-upload>

        <div class="el-upload__tip" style="font-size:15px">身份证反面</div>

      </div>


    </div>

    <div style="width: 30%; margin: 20px auto">
      <button  class="btn btn-primary" style="width:100%; margin-top:20px;" data-toggle="modal" data-target="#myModalCertif">下一步</button>
    </div>
    <div class="prompt">
      <ul>
        <li><span class="glyphicon glyphicon-exclamation-sign"></span>身份证证件四角完整显示。</li>
        <li><span class="glyphicon glyphicon-exclamation-sign"></span>身份证所有信息能清晰辨认。</li>
        <li><span class="glyphicon glyphicon-exclamation-sign"></span>身份证上信息没有被反光遮挡。</li>
        <li><span class="glyphicon glyphicon-exclamation-sign"></span>临时身份证、有效期小于30天的身份证无效。</li>
      </ul>
    </div>



    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModalCertif" tabindex="-1" role="dialog" aria-labelledby="myModalCertifLabel"
      aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalCertifLabel" style="font-size:10px; color: #2e7ba7; text-align: center;">*请确认您的身份信息,如有错误请重新上传。
</h4>
          </div>
          <div class="modal-body">
            <div class="input-group">
              <ul>
                <li>
                  <span>姓名</span>
                  <span>李明</span>
                </li>
                <li>
                  <span>证件号</span>
                  <span>544236111111111</span>
                </li>
                <li>
                  <span>身份证地址</span>
                  <span>--------------------11111111</span>
                </li>
              </ul>

            </div>

          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">重新上传</button>
            <button type="button" class="btn btn-primary">确认提交</button>
          </div>


        </div><!-- /.modal-content -->
      </div><!-- /.modal -->
    </div>


    <SuccessCertifi></SuccessCertifi>



  </div>
</template>

<script>
export default {
  name: 'CertificationIndex',
  data() {
    return {
      imageUrlFront: '',
      imageUrlContrary: '',


    };
  },
  methods: {
    // 上传时的验证
    beforeAvatarUpload(file) {
      //console.log(file)
      let types = ['image/png', 'image/jpeg']
      const isLt1M = Number(file.size) < 1024 * 1024 * 10;
      const isImg = types.includes(file.type)
      if (!isImg) {
        this.$message.error('上传头像图片只能是 JPG 或者 PNG 格式!');
        alert('上传头像图片只能是 JPG 或者 PNG 格式!')

      }
      if (!isLt1M) {
        alert('上传头像图片大小不能超过 10MB!')
        this.$message.error('上传头像图片大小不能超过 10MB!');
      }
      return isImg && isLt1M;
    },

    //文件列表改变时 将文件列表保存到本地,取最新的
    handleChangeFront(file, fileList) {
      // console.log(fileList)
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]]
      }
      this.uploadImgFront()
    },
    //图片正面上传
    uploadImgFront() {
      let that = this;
      //console.log(this.fileList[0].raw)
      let formdata = new FormData();
      formdata.append("file", this.fileList[0].raw)
      console.log('formdata', formdata);
      this.$API.reqIuploadImg(formdata).then((res) => {
        that.imageUrlFront = res.url
      })
    },


    handleChangeContray(file, fileList) {
      // console.log(fileList)
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]]
      }
      this.uploadImgContrary()
    },
    //图片反面上传
    uploadImgContrary() {
      let that = this;
      //console.log(this.fileList[0].raw)
      let formdata = new FormData();
      formdata.append("file", this.fileList[0].raw)
      console.log('formdata', formdata);
      this.$API.reqIuploadImg(formdata).then((res) => {
        that.imageUrlContrary = res.url
      })
    },
  }
}
</script>

<style>
.sfz {
  margin: auto;
  margin-top: 80px;
  /* display: flex;
  justify-content: space-around; */
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.btn-primary {
  border-radius: 20px;
  background: linear-gradient(to right, #97d9fe, #2e7ba7);
  border: none;
}
.modal-footer {
  text-align: center;
}

.prompt {
  margin-top: ;
}

.prompt ul {
  margin-left: 15%;
  color:#2e7ba7;
  font-size: small;
}

.input-group ul li {
    display: flex;
    justify-content: space-between;
}
</style>
